<script setup lang="js">

import { reactive } from 'vue'

let tom=reactive({
  name:"tom",
  age:5
})

function reset(){
  tom.name="tom";
  tom.age=5;
}

function reset2(){
  tom=reactive({
    name:"tom",
    age:5
  })
}

function reset3(){
  Object.assign(tom,{
    name:"tom",
    age:5
  })
}

</script>

<template>
  <q-banner class="bg-primary text-white text-center shadow-2">
    <div class="text-h5 q-mb-sm">陈一非 23211860123</div>
  </q-banner>
  <div class="q-pa-md q-gutter-sm bg-white shadow-5 q-mt-lg q-mx-md">
    <q-btn style="background: #a54400; color: white" label="修改姓名" @click="tom.name= tom.name + '~'"/>
    <q-btn style="background: #8f6400; color: white" label="修改年龄" @click="tom.age++"/>
    <q-btn style="background: #718100; color: white" label="重置" @click="reset"/>
    <q-btn style="background: #287500; color: white" label="重置2" @click="reset2"/>
    <q-btn style="background: #007875; color: white" label="重置3" @click="reset3"/>

    <p id="window" class="text-center text-h4 text-primary q-mt-lg" style="border: 2px solid; border-color: #000000">姓名：{{tom.name}} <br> 年龄：{{tom.age}}</p>
  </div>


</template>

<style scoped>
</style>
